<template>
  <basic-container>



    <el-row :span="24" style="height: 100%">
      <el-col :span="6">
        <el-divider content-position="center">菜单</el-divider>
        <div style="height: 70%;overflow: scroll">
          <avue-tree
              ref="avueTree"
              :permission="getBtnPermission"
              :loading="loading"
              :option="menuTreeOption"
              :data="dataSource"
              @check-change="checkChange"
              @node-click="handlerDataRule">

              <span class="el-tree-node__label" slot-scope="{ node, data }">
                <span>
                  <i :class="data.icon"></i>
                  {{ (node || {}).label }}
                </span>
              </span>
            <template slot-scope="scope" slot="menu">
              <div v-if="getBtnPermission('sys:menu:add')" class="avue-tree__item" @click="addMenu()">新增</div>
              <div v-if="getBtnPermission('sys:menu:edit')" class="avue-tree__item" @click="editMenu(scope.node)">编辑
              </div>
              <div v-if="getBtnPermission('sys:menu:del')">
                <div v-if="selectTemp.length>0" class="avue-tree__item" @click="batchDelMenu">批量删除</div>
                <div v-else class="avue-tree__item" @click="delMenu(scope.node)">删除</div>
              </div>

            </template>
          </avue-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <div v-if="getBtnPermission('sys:dataRule:list')">
          <el-divider content-position="left">数据规则</el-divider>
          <data-rule ref="dataRule"></data-rule>
        </div>
      </el-col>
    </el-row>
    <editor ref="editorMenu" @change="getList()"></editor>
  </basic-container>
</template>

<script>
import startCrud from "@/mixins/start-crud.js"
import dataRule from "@/views/sys/menu/dataRule";
import editor from "@/views/sys/menu/editor";
import {deleteById, deleteByIds} from "@/api/sys/menuApi"

export default startCrud({
  components: {
    dataRule,
    editor
  },
  computed: {
    menuTreeOption() {
      return {
        title: '我是标题',
        filterText: "搜索关键字自定义",
        defaultExpandAll: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        multiple: this.getBtnPermission("sys:menu:deletes"),
        formOption: {
          labelWidth: 100,
          multiple: true,
          column: [
            {
              label: '自定义项',
              prop: 'label'
            }],
        },
        props: {
          label: 'label',
          value: 'id',
          children: 'children'
        }
      }

    }
  },
  data() {
    return {
      selectTemp: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    editMenu(node) {
      if (!node) {
        node = {};
      }
      this.$refs.editorMenu.show(node);
    },
    addMenu() {
      this.$refs.editorMenu.show();
    },
    handlerDataRule(row) {
      this.$refs.avueTree.client.show = false
      if (this.$refs.dataRule) {
        this.$refs.dataRule.show(row[this.rowKey])
      }
    },
    checkChange() {
      this.selectTemp = this.$refs.avueTree.getCheckedKeys();
    },
    batchDelMenu() {
      this.$confirm(`此操作将永久删除您选择的数据！ 是否继续?`, '系统提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        return deleteByIds(this.selectTemp)
      }).then(res => {

        this.getList();
        this.$message.success('删除成功')
      }).finally(() => {
        this.selectTemp = []
      })
    },
    delMenu(row) {
      this.$confirm(`此操作将永久删除为【${row.label}】的数据！ 是否继续?`, '系统提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        if (this.rowDelBefore) this.rowDelBefore(row, index);
        return deleteById(row[this.rowKey], row)
      }).then(res => {
        this.getList();
        this.$message.success('删除成功')
        if (this.rowDelAfter) this.rowDelAfter(row, index);
      })
    }
  }
}, {
  name: "sys/menu",
  isTreeData: true,
});
</script>

<style scoped>

</style>
